<template>
    <div class="user_wapper" @mouseleave="onmouseout">
        <div @mouseenter="onmouseover">
            <el-image
                style="width: 30px; height: 30px"
                src="https://fanyiapp.cdn.bcebos.com/cms/oldimage/37d3d539b6003af3fbb6653b3a2ac65c1038b659.jpg"
                fit="cover"
            ></el-image>
        </div>
        <div @mouseenter="onmouseover">
            超级管理员
            <i class="el-icon-arrow-down"></i>
        </div>
        <ul class="list animated day-3s" :class="{fadeInUp:fadeInUp,active:active}">
            <li @click="onexit">退出</li>
            <li>登录</li>
            <li>修改密码</li>
        </ul>
    </div>
</template>
<script>
export default {
  created() {
    this.$http.getorder();
  },
  mounted() {
  },
  data() {
    return {
      fadeInUp: false,
      active:true,
    };
  },
  // 方法
  methods: {
    onmouseover() {
      this.fadeInUp = true;
      this.active = false
    },
    onmouseout() {
      this.fadeInUp = false;
       this.active = true
    },
    onexit(){
        this.$emit("exit")
    }
  },
  //计算属性
  computed: {},
  // 监听属性
  watch: {},
  // 组件注册
  components: {},
  // 组件销毁之前
  beforeDestroy() {}
};
</script>
<style lang="less" scoped>
.user_wapper {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;

  .el-image__inner {
    border-radius: 30px;
  }
  i{
      transition: all .4s;
  }
  &:hover i{
      transform: rotate(180deg)
  }
  .list {
    position: absolute;
    left: 0;
    top: 60px;
    width:100%;
    animation-duration: 0.5s;
    z-index: 1000;
    li {
      padding:5px;
      margin-top: 10px;
      text-align: center;
      &:hover{
          background-color: #008080;
      }
    }
  }
  .active{
      display: none;
  }
}
</style>
